<template>
  <div>
    使用ref的写法: 组件自定义事件（第二种方式使用ref的写法）：comC
    <el-button @click="sendData">发送数据</el-button>
    <el-button @click="unbind">解绑事件</el-button>

    <hr>
    <span>求和：{{sum}}</span>
    <el-button @click="add">递增1</el-button>
    <button @click="add">递增2</button>
    <el-button @click="deathCom">销毁当前组件</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sum:0,
    };
  },
  methods: {
    sendData() {
      this.$emit("comCData", "comC");
    },
    unbind(){
        console.log("解绑自定义事件");
        this.$off('comCData') // 解绑一个自定义事件
        // this.$off(['comCData']) // 解绑多个自定义事件
        // this.$off() // 解绑所有自定义事件
    },
    add() {
      console.log("add被调用了...");
      this.sum++
    },
    deathCom(){
      // 销毁组件后，当前组件实例自定义事件就会失效了
      // 注意，原生事件还是有效的，例如button上绑定的事件属于原生事件，组件销毁后，依然生效
      // 但，在el-button上绑定的事件属于自定义事件，该事件已经失效了
      this.$destroy() 
    }
  },
};
</script>